<template>
  <div class="article-list">
    <van-nav-bar
      title="图文资讯列表页"
      left-text="返回"
      left-arrow
      @click-left="$router.back()"
    />
    <!-- 标签页 -->
    <div class="tab">
      <van-tabs v-model="active" swipeable animated @change="changeId">
        <van-tab v-for="item in articleType" :title="item.title" :key="item.id">
          <div class="content">
            <Article :list="articleList"></Article>
          </div>
        </van-tab>
      </van-tabs>
    </div>
  </div>
</template>

<script>
import { getImgCategory, getImages } from "@/apis/article.js";
import Article from "@/components/Article.vue";
export default {
  components: {
    Article,
  },
  data() {
    return {
      articleType: [],
      active: 0,
      id: 0,
      articleList: [],
    };
  },
  async created() {
    //   获取图文类型
    this.articleType = (await getImgCategory()).data.message;
    this.articleType.unshift({ id: 0, title: "全部" });
    // console.log("articleType", this.articleType);

    // 获取图文资讯列表
    this.$nextTick(async () => {
      console.log("this.articleType", this.articleType[this.active].id);
      this.articleList = (
        await getImages(this.articleType[this.active].id)
      ).data.message;
      //   console.log("articleList", this.articleList);
    });
  },
  methods: {
    async changeId() {
      this.articleList = (
        await getImages(this.articleType[this.active].id)
      ).data.message;
      //   console.log("articleList", this.articleList);
    },
  },
};
</script>

<style lang="less" scoped>
/deep/.van-nav-bar__content {
  background-color: #f7f7f7;
}
</style>
